<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文件上传</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
</head>
<body>
<div class="layui-form" lay-filter="fileManagement-file-form-list" id="fileManagement-file-form-list" style="padding: 0 18px 0 0;height: 490px;overflow: auto">
    <div class="layui-form-item">
        <label class="layui-form-label">父节点</label>
        <div class="layui-input-inline">
            <span style="line-height: 38px">${parentName}</span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文件密级</label>
        <div class="layui-input-inline">
            <select name="fileSecretLevel" lay-verify="required">
                <#list fileSecretList as inNode>
                    <option value="${inNode.key}">${inNode.fileSecret}</option>
                </#list>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文件摘要</label>
        <div class="layui-input-inline">
            <textarea name="fileKeywords" maxlength="80" style="width: 400px; height: 150px;" autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文件上传</label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-normal" id="selFile" name="files[]">选择文件</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传列表</label>
        <div class="layui-input-inline" style="width: 630px">
            <div class="layui-upload-list">
                <table class="layui-table">
                    <thead>
                    <tr><th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr></thead>
                    <tbody id="fileList"></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="fileManagement-file-form-submit" id="fileManagement-file-form-submit">
    </div>
</div>
<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script src="${ctx}/layui/layui.js"></script>
<script>

var multipartMaxSize = '${multipartMaxSize}';

    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','common','upload','jquery','commons','form','setter'], function () {
        var upload = layui.upload,$ = layui.jquery,commons = layui.commons,form=layui.form,setter=layui.setter;
        var  treeid='${parentId}';//树id
        form.render();

        var fileNames=[];
        function isInArray(arr,value){
            for(var i = 0; i < arr.length; i++){
                if(value === arr[i].name){
                    return false;
                }
            }
            return true;
        }
        function delArray(arr,value){
            for(var i = 0; i < arr.length; i++){
                if(value === arr[i].indexId){
                   arr.splice(i,1);
                }
            }
        }
        var demoListView = $('#fileList')
            ,uploadListIns = upload.render({
            elem: '#selFile'
            ,url: serverPath.systemPath + setter.sysLinkPath + 'fileManagement/fileUpload'
            ,accept: 'file'
            ,size:multipartMaxSize
            ,multiple: true
            ,auto: false
            ,bindAction: '#fileManagement-file-form-submit'
            ,before: function (obj) {
                this.data = {"fileKeywords": $('textarea[name="fileKeywords"]').val(), "fileSecretLevel": $('select[name="fileSecretLevel"]').val(),"parentId":treeid};
                if(fileNames.length>0){
                    layui.layer.load(); //上传loading
                }
            }
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    if(isInArray(fileNames,file.name)){
                        fileNames.push({name:file.name,indexId:index});
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide" style="margin-right: 10px">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete" style="margin-left: 0px">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            delArray(fileNames,index);
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    }else{
                        layer.alert('文件名已重复');
                        delete files[index]; //删除对应的文件
                    }

                });
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                layui.layer.closeAll('loading'); //关闭loading
                var obtn=$(window.parent.document).find("div.addFiles-class");
                obtn.find('.layui-layer-btn0').attr("disabled",false).css("pointer-events","auto");
                obtn.find('.layui-layer-btn0').css({"opacity":1});
            }
            ,done: function(res, index, upload){
                if(res.code==0){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    delete this.files[index]; //删除文件队列已经上传成功的文件
                    delArray(fileNames,index);
                    if("{}" == JSON.stringify(this.files)){
                        parent.layer.alert(res.msg,function (index1) {
                            parent.layer.close(index1);
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        })
                    }
                }else{
                    var otr = demoListView.find('tr#upload-'+ index)
                        ,otds = otr.children();
                    otds.eq(2).html('<span style="color: #FF5722;">'+res.msg+'</span>');
                    otds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    // this.error(index, upload);
                }
            }
            ,error: function(index, upload){
                layui.layer.closeAll('loading'); //关闭loading
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
        $('#fileManagement-file-form-submit').click(function () {
            if(fileNames.length<1){
                layui.layer.alert('请选择文件')
            }else{
                var obtn=$(window.parent.document).find("div.addFiles-class");
                obtn.find('.layui-layer-btn0').attr("disabled",true).css("pointer-events","none");
                obtn.find('.layui-layer-btn0').css({"opacity":0.3});
            }
        })
    });
</script>
</body>
</html>